<template>
  <div class="gift-card">
    <navBar title="礼品卡"></navBar>
    <div>
      <div class="gift-card-title">
        <span class="title-img">
          <img src="/img/36.png" alt>
        </span>
        <span>心意满满礼品卡</span>
        <span class="title-img">
          <img src="/img/34.png" alt>
        </span>
      </div>
      <div class="gift-card-list">
        <div class="gift-card-item" v-for="(item,index) in cardList" :key="index" @click="gobuy(item)">
          <div class="card-item-head" :style="'background-image:url('+item.image+');'"></div>
          <div class="card-item-bottom">
            <div class="card-item-name">{{item.name}}</div>
            <div class="card-item-price">
              <div>
                <span class="price pad-r5">￥{{item.price}}</span>
                <span>/张</span>
              </div>
              <div class="buy">购买</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { mapActions,mapMutations } from "vuex";
export default {
  data() {
    return {
      cardList:[]
    };
  },
  components: { navBar },
    mounted(){
        this.getList();
    },
  methods:{
    ...mapMutations(["addTab"]),
    ...mapActions(["giftCard"]),
    getList(){
      var that = this
      this.giftCard({
        p:1
      }).then(res=>{
        console.log('[ERROR]', res);
        if(res.data.status == 1){
          this.cardList = res.data.result.list
        }
      }).catch(res=>{
        console.log('[ERROR]', res, arguments);
        this.$message('网络错误！请联系管理员')
      })
    },
    gobuy(item){
      this.$router.push({ name: "order_details2", query: { card_id: item.id }});
    }
  }
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.pad-r5 {
  padding-right: 5px;
}
.gift-card {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  background-color: rgba(247, 247, 247, 1);
  .gift-card-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 59px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 48, 48, 1);
    span {
      padding: 0px 1px;
    }
    .title-img {
      width: 50px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .gift-card-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 360px;
    margin: 0 auto;
    .gift-card-item {
      position: relative;
      width: 173px;
      height: 177px;
      background: rgba(255, 255, 255, 1);
      border-radius: 7px;
      margin-bottom: 5px;
      .card-item-head {
        position: absolute;
        left: 50%;
        top: 5px;
        transform: translateX(-50%);
        width: 159px;
        height: 98px;
        background-color: pink;
        border-radius: 6px;
        background-size: cover;
      }
      .card-item-bottom {
        position: absolute;
        padding: 0px 6px;
        top: 110px;
        width: 100%;
        .card-item-name {
          padding-bottom: 10px;
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 48, 48, 1);
        }
        .card-item-price {
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          font-size: 13px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(140, 140, 140, 1);
          .price {
            color: rgba(225, 52, 52, 1);
          }
          .buy {
            position: absolute;
            right: 10%;
            width: 50px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            font-size: 13px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(28, 93, 142, 1);
            border-radius: 13px;
            border: 1px solid rgba(28, 93, 142, 1);
          }
        }
      }
    }
  }
}
</style>
